<template>
	<div class="box">
		<!-- 预留状态栏高度 -->
		<!-- 页面加载时获取到不同机型对应的状态栏的高度 -->
		<view class="statusBar" :style="{height:statusHeight}"></view>
		<view class="tab" @click="back">
			我的订单
		</view>
		<view class="orders">
			<!-- <view class="order">
				<view class="type">{{}}</view>
				<view class="state">{{}}</view>
				<view class="time">{{}}</view>
				<view class="start">{{}}</view>
				<view class="end">{{}}</view>
				<view class="money">{{}}</view>
				
			</view> -->
			<view class="order">
				<view class="type">快车</view>
				<view class="state">已完成</view>
				<view class="time">2022年6月2号</view>
				<view class="start">天府软件园G区</view>
				<view class="end">银泰城</view>
				<view class="money">18.3</view>
				
			</view>
		</view>
	</div>
</template>

<script>
	import orderitem from '../../components/orderitem/orderitem.vue'
	export default{
		data(){
			return{
				statusHeight:0,	
				orders:[],
				// 传给后端的内容
				cartype:''
			}
		},
		components:{
			orderitem,
		},
		onLoad(){
			// 获取设备信息 状态栏高度
			var info = uni.getSystemInfoSync();
			// console.log(info);
			this.statusHeight=info.statusBarHeight+'px';
			// 加载页面时 请求订单数据
			var that=this 
			uni.request({
				url:"http://124.221.202.161/order/getOrderInfo",
				method:"GET",
				header:'',
				success(res) {
					console.log(res);
					// 数据仅在本页用，得到后先this.cartype=xxx进行数据修改 之后{{渲染}}
					//多条记录，怎么显示 
					
				}
			})
		},
		methods:{
			back(){
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.box{
		.statusBar{
			width: 100%;
			background-color: #eee;
		}
		.tab{
			width: 100%;
			height: 100rpx;
			color: white;
			background-color: blue;
			text-align: center;
			line-height: 100rpx;
			pointer-events: none;
			&:before{
				content: "<";
				box-sizing: border-box;
				height: 100rpx;
				width: 100rpx;
				color: white;
				position: absolute;
				left: 0;
				pointer-events: auto;
			}
		}
		.orders{
			color:black;
			position: relative;
			// background-color: #eee;
			color: black;
			
			
				.type{
					position: absolute;
					left:30rpx;
					top:30rpx;
					padding:20rpx;
				}
				.state{
					position: absolute;
					right:30rpx;
					top:30rpx;
					padding:20rpx;
				}
				.time{
					position: absolute;
					left:30rpx;
					top:90rpx;
					padding:20rpx;
					font-size: 20rpx;
				}
				.start{
					position: absolute;
					left:30rpx;
					top:120rpx;
					padding:20rpx;
					font-size: 20rpx;
				}
				.end{
					position: absolute;
					left:30rpx;
					top:150rpx;
					padding:20rpx;
					font-size: 20rpx;
				}
				.money{
					position: absolute;
					right:30rpx;
					top:150rpx;
					padding:20rpx;
				}
			
		}
	}
</style>